<template>
  <div class="container">
    <div class="top">
      <div>
        <div v-show="!showInput" class="name">
          <span style="color: red"></span>
          <span>{{ titleName }}</span>
          <el-link icon="el-icon-edit-outline" @click="editTitle"></el-link>
        </div>
        <div v-show="showInput" class="name-input">
          <!-- <label>参数组名称</label> -->
          <el-input
            type="text"
            :maxlength="20"
            v-model="titleName"
            size="mini"
            @blur="loseFocus"
            placeholder="请输入名称"
            clearable
            ref="mark"
            ><template slot="prepend" style="color: red"
              >名称</template
            ></el-input
          >
        </div>
      </div>
      <div class="button">
        <template v-for="(item, index) in buttonArr">
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.content"
            :disabled="!item.disabled"
            :placement="item.placement || 'top'"
            :key="index"
            v-if="!item.hide"
          >
            <div
              style="display: inline-block; margin: 0 5px"
              v-if="!item.isHide"
            >
              <el-button
                type="plain"
                class="btn-text-blue"
                :key="index"
                :disabled="item.disabled"
                size="mini"
                :icon="item.icon"
                @click="item.method"
                >{{ item.name }}</el-button
              >
            </div>
          </el-tooltip>
        </template>
      </div>
    </div>
    <div class="middle">
      <dividerTitle :title="'预设参数'"></dividerTitle>
      <div class="add">
        <el-dropdown
          class="avatar-container"
          trigger="click"
          @command="addPresetParam"
        >
          <div class="avatar-wrapper">
            <el-button
              size="mini"
              icon="icon-a-tianjiaxinzeng"
              type="plain"
              plain
            >
              新增
              <i class="el-icon-caret-bottom" />
            </el-button>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <el-dropdown-item
              v-for="(item, index) in presetList"
              :key="index"
              :command="item"
              >{{ item.paramName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <base-table :tableSetting="presetTableSetting"></base-table>
      </div>
    </div>
    <div class="buttom">
      <dividerTitle :title="'自定义参数'"></dividerTitle>
      <!-- 基本参数组件 -->
      <customParams :baseParamList="baseParamList" />
    </div>
  </div>
</template>

<script>
import {
  baseParamDetail,
  presetParamList,
  baseParamAddOrEdit,
  baseParamDelete,
} from "@/api/standardManagement/acountManagement.js";
import customParams from "./customParams.vue";
export default {
  props: ["id"],
  components: {
    customParams,
  },
  data() {
    return {
      title: "",
      show: false,
      titleName: "",
      showInput: false,
      isMultiSelect: false,
      buttonArr: [
        {
          name: "新增",
          icon: "el-icon-plus",
          isHide: false,
          disabled: !this.$store.getters.isBtnAuth("add"), //控制按钮的禁用
          content: "未授权功能", //禁用提示内容
          method: () => {
            this.buttonArr[0].isHide = true;
            this.buttonArr[2].isHide = true;
            this.buttonArr[3].isHide = false;
            this.clearData();
            //this.titleName = "添加节点";
          },
        },
        {
          name: "保存",
          icon: "icon-a-wanchengbaocun",
          disabled: !this.$store.getters.isBtnAuth("save"), //控制按钮的禁用
          content: "未授权功能", //禁用提示内容
          method: () => {
            this.save();
          },
        },
        {
          name: "删除",
          icon: "icon-shanchu",
          isHide: false,
          disabled: !this.$store.getters.isBtnAuth("delete"), //控制按钮的禁用
          content: "未授权功能", //禁用提示内容
          method: () => {
            this.$confirm("确定要删除该条数据吗", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.deleteData();
              })
              .catch((e) => {});
          },
        },
        {
          name: "取消",
          icon: "el-icon-circle-close",
          isHide: true,
          method: () => {
            this.buttonArr[0].isHide = false;
            this.buttonArr[2].isHide = false;
            this.buttonArr[3].isHide = true;
            this.getParamTable(this.id);
            this.showInput = false;
          },
        },
      ],
      //预设参数
      presetTableSetting: {
        indexShow: true,
        column: [
          {
            label: "参数名称",
            textAlign: "center",
            prop: "paramName",
          },
          {
            label: "是否必填",
            textAlign: "center",
            prop: "isMust",
            type: "check",
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "删除",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.presetTableSetting.data.splice(index, 1);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        expandColumn: [],
        expandData: [],
        data: [],
        noBorderRight: true,
        autoHeight: true,
      },
      presetList: [],
      baseParamList: [],
      baseParamId: null,
    };
  },
  watch: {
    id: {
      handler(val) {
        if (val != "") {
          this.baseParamId = val;
          this.showInput = false;
          this.getParamTable(val);
        }
      },
    },
  },
  created() {
    //this.getParamTable(this.id);
    this.getPresetList();
  },
  methods: {
    //编辑名称
    editTitle() {
      this.showInput = true;
      // setTimeout(() => {
      //   this.$refs.mark.focus();
      // }, 0);
    },
    //名称输入框失去焦点
    loseFocus(val) {
      if (this.titleName != "") {
        this.showInput = false;
      } else {
        //this.$refs.mark.focus();
        this.$message.warning("名称不能为空");
      }
    },
    //保存基本参数组
    save() {
      const params = {
        id: this.baseParamId,
        name: this.titleName,
        typeGroupDefaultParamsList: this.presetTableSetting.data,
        typeGroupCustomParamsList: this.baseParamList,
      };
      if (this.titleName == "") {
        this.showInput = true;
        this.$message.warning("名称不能为空");
      } else if (
        this.presetTableSetting.data.length != 0 ||
        this.baseParamList.length != 0
      ) {
        baseParamAddOrEdit(params).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.description);
            this.$emit("save");
          }
        });
      } else {
        this.$message.warning("预设参数和自定义参数不能同时为空");
      }
    },
    //删除基本参数组
    deleteData() {
      baseParamDelete({ id: this.id })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.$emit("deleteOnce");
          }
        })
        .catch((error) => {});
    },
    //获取基本参数
    getParamTable(id) {
      baseParamDetail({ id }).then((res) => {
        if (res.code == 200) {
          this.titleName = res.data.name;
          this.$set(
            this.presetTableSetting,
            "data",
            res.data.typeGroupDefaultParamsList
          );
          this.baseParamList = res.data.typeGroupCustomParamsList;
        }
      });
    },
    //获取预设参数下拉列表
    getPresetList() {
      presetParamList().then((res) => {
        if (res.code == 200) {
          this.presetList = res.data;
        }
      });
    },
    //添加预设参数组
    addPresetParam(row) {
      let res = this.presetTableSetting.data.every((item) => {
        return item.paramName != row.paramName;
      });
      res
        ? this.presetTableSetting.data.push(row)
        : this.$message.warning("预设参数不能重复");
    },
    //点击新增清空数据
    clearData() {
      this.baseParamId = null;
      this.titleName = "";
      this.showInput = true;
      // setTimeout(() => {
      //   this.$refs.mark.focus();
      // }, 0);
      this.presetTableSetting.data = [];
      this.baseParamList = [];
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 16px;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      text-align: left;
      padding: 0 10px;
    }
    .name-input {
      height: 40px;
      line-height: 40px;
    }
    .button {
      height: 40px;
      line-height: 40px;
    }
  }
  .middle {
    flex: 6;
    margin-bottom: 20px;
    .add {
      text-align: right;
      margin: 10px 0;
      .user-dropdown {
        width: 50px;
      }
    }
  }
  .buttom {
    flex: 6;
  }
}
</style>
